<template>
	<view class="relative full-screen uni-bg-white">
		<view class="bg-primary" style="z-index:0;top:0;height:231px;">
			<image class="w-full" mode="widthFix" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-withdraw.png"></image>
		</view>
		<z-paging>
			<template #top>
				<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
					<template #left>
						<image class="size-32" src="@/static/svg/icon-back.svg" />
					</template>
					<view class="flex center w-full fs-16"><text class="text-white">我的收益</text></view>
				</uni-nav-bar>
			</template>
			<view>
				<view class="flex justify-between item-center mx-16 pt-12 pb-16">
					<view class="text-white">
						<view class="font-bold">
							<text class="fs-16">¥</text>
							<text class="fs-32">{{numberFormat(withdrawStore.commissionAmt)}}</text>
						</view>
						<view class="fs-12 mt-4">可提金额（元）</view>
					</view>
					<view class="inline-flex center radius-16 px-16 h-29 fs-12 font-semibold" style="background:#FDEAD5;color: #BC5B1E;" @click="toWithdraw">立即提现</view>
				</view>
				<view class="flex justify-between item-center mx-16 pb-12 text-white">
					<view class="flex-col">
						<view class="fs-14 leading-20">{{numberFormat(withdrawStore.dayEstimateAmt)}}</view>
						<view class="fs-12 leading-17">今日预估佣金</view>
					</view>
					<view class="w-1 h-9 bg-white"></view>
					<view class="flex-col">
						<view class="fs-14 leading-20">{{numberFormat(withdrawStore.monthEstimateAmt)}}</view>
						<view class="fs-12 leading-17">本月预估佣金</view>
					</view>
					<view class="w-1 h-9 bg-white"></view>
					<view class="flex-col">
						<view class="fs-14 leading-20">{{numberFormat(withdrawStore.totalSettleAmt)}}</view>
						<view class="fs-12 leading-17">累计佣金</view>
					</view>
				</view>
			</view>
			<view class="h-12 bg-default"></view>
			<view class="bg-white">
				<view class="pl-20 pr-14 py-20 leading-20 flex justify-between" @click="toWithdrawRecord">
					<text class="text-color-regular fs-14 font-normal">提现记录</text>
					<image class="w-6 h-11" src="@/static/svg/arrow-stroke.svg"></image>
				</view>
				<view class="h-1 bg-default"></view>
				<view class="pl-20 pr-14 py-20 leading-20 flex justify-between" @click="toFundDetail">
					<text class="text-color-regular fs-14 font-normal">资金明细</text>
					<image class="w-6 h-11" src="@/static/svg/arrow-stroke.svg"></image>
				</view>
				<view class="h-1 bg-default"></view>
				<!--
				<view class="my-16 mx-20">
					<view class="text-color-regular fs-14 font-semibold mb-8">温馨提示</view>
					<view class="leading-17 text-color-regular fs-12 font-normal">
						<text>{{withdrawStore.description && withdrawStore.description.replace(/\\n/g, '\n')}}</text>
					</view>
				</view>
				-->
			</view>
		</z-paging>
	</view>
</template>

<script setup name="WithdrawInfo">
	import { onMounted, ref } from 'vue'
	import { useWithdrawStore } from '@/stores/modules/withdraw.js'
	import { numberFormat } from '@/utils/index.js'
	
	const withdrawStore = useWithdrawStore()

	const goBack = () => uni.navigateBack()
	
	const toWithdraw = () => {
		uni.navigateTo({
			url: '/pagesG/withdraw/withdraw',
		})
	}
	
	const toWithdrawRecord = () => {
		uni.navigateTo({
			url: '/pagesG/withdraw/withdraw-record'
		})
	}
	
	const toFundDetail = () => {
		uni.navigateTo({
			url: '/pagesG/withdraw/fund-detail'
		})
	}
	
	onMounted(() => {
		withdrawStore.getInfo()
	})
</script>
